<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="船票+住宿订单" backUrl="/pages/my/index"></c-nav-bar>
		<TopTabs :list="tabList" @changeTab="changeTab" :top="mt" :placeholder="'输入酒店名称/订单号'" @sousuo="sousuo"></TopTabs>
		<view class="orders">
			<view v-for="(item,index) in orderList" :key="index" @tap="toDetails(item)">
				<view class="top">
					<view class="left">
						<image src="@/static/my/cp_zs.png" mode=""></image>
						<text :class="item.orderState==3?'qx':''">船票+住宿</text>
					</view>
					<view class="right">
						<text :class="oscConfig[item.orderState]">{{ocfg[item.orderState]}}</text>
					</view>
				</view>
				<view class="content">
					<view class="title">{{item.jointName}}</view>
					<view class="date">
						<text>{{item.arriveDate}}</text>
						<text>至</text>
						<text>{{item.leaveDate}}</text>
					</view>
					<view class="room_price">
						<view class="room">
							<text>{{item.num}}晚{{item.checkInRooms}}间</text>
							<text>{{item.houseBaseName}}</text>
						</view>
						<view class="price">
							<text :class="item.orderState==3?'qx':''">¥{{item.realityPay}}</text>
						</view>
					</view>
				</view>
				<view class="btns">
					<view @tap.stop="deleteOrder(item)" v-if="item.orderState==3||item.orderState==4">删除</view>
					<view @tap.stop="refundTicket(item)" v-if="item.orderState==1||item.orderState==2">退票退款</view>
					<view @tap.stop="refundDetails(item)" v-if="item.orderState==6||item.orderState==7">退款详情</view>
					<!-- <view @tap.stop="invoice(item)" v-if="item.orderState==1||item.orderState==2">发票/报销</view> -->
					<view @tap.stop="cancelOrder(item)" v-if="item.orderState==0">取消订单</view>
					<view @tap.stop="toPay(item)" v-if="item.orderState==0" style="color: #007A69;">去支付</view>
					<view @tap.stop="againReserve(item)" v-if="item.orderState>0">再次预订</view>
					<view @tap.stop="toEvaluate(item)" v-if="item.orderState==20" style="color: #007A69;">去评价</view>
				</view>
			</view>
		</view>
		<view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import TopTabs from '../../compoments/TopTabs/topTabs.vue';
	export default {
		name:'steamerTicketStayOrder',
		components:{ TopTabs },
		data() {
			return {
				mysearch:'',
				h:uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				tabList:[
					{ name:'全部' },
					{ name:'待支付' },
					{ name:'待使用' },
					{ name:'退款/售后' }
				],
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				orderList:[],
				oscConfig:{0:'textDzf',1:'textDcx',3:'textQx'},
				ocfg: this.$ocfg,
				pageIndex: 1,
				pageCount: 10,
				isOver: false,
				orderState: ''
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.isOver) return
			this.getList();
		},
		methods: {
			init() {
				this.pageIndex = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			sousuo(keyword){
				this.mysearch = keyword;
				this.pageIndex = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			getList() {
				let that = this;
				this.$api.get('/api/shipHotel/getShPersonalOrderList', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					orderState: this.orderState,
					page: this.pageIndex,
					limit: this.pageCount,
					searchBox:this.mysearch,
				}).then(res => {
					if (res.data.code === 0) {
						that.pageIndex++;
						let { list, total } = res.data.data;
						if (that.orderList.length + list.length > total || list.length == 0) return that.isOver = true;
						that.orderList = [...that.orderList, ...list];
						that.orderList.forEach((d, i) => {
							d.leaveDate = new Date(d.leaveDate).Format('yyyy-MM-dd');
							d.arriveDate = new Date(d.arriveDate).Format('yyyy-MM-dd');
						})
					} else that.$showToast(res.data.msg);
				})
			},
			changeTab(index){
				if (index === 0) this.orderState = '';
				else if (index === 1) this.orderState = '0'
				else if (index === 2) this.orderState = '1,2';
				else this.orderState = '-2,-1,3,4,5,6,7,8,9,10,11';
				this.init();
			},
			//删除
			deleteOrder(item){
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//再次预订
			againReserve(item){
				uni.navigateTo({
					url:'/pagesIndex/steamerTicketStay/index'
				})
			},
			//取消订单
			cancelOrder(item){
				this.$api.get('/api/shipHotel/cancelOrder/'+item.orderCode).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已取消');
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},
			//发票/报销
			invoice(item){
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//退票退款
			refundTicket(item){
				uni.navigateTo({
					url:'/pagesMy/steamerTicketStayOrder/refundTicket?id='+item.id
				})
			},
			//退款详情
			refundDetails(item){
				uni.redirectTo({
					url:'/pagesMy/steamerTicketStayOrder/refundDetails?item='+JSON.stringify({
						orderState:item.orderState,
						price:item.realityPay,
						sxf:0//手续费
					})
				})
			},
			//去支付
			toPay(item){
				this.$api.post('/order/icbc/createOrder', {
					orderCode: item.orderCode,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$wxPay(res.data).then(result => {
							this.$showToast('支付成功');
							this.init();
						})
					}
				})
			},
			toDetails(item){
				uni.redirectTo({
					url:'/pagesMy/steamerTicketStayOrder/details?orderId='+item.id
				})
			},
			toEvaluate(item){
				item.guideId = item.id;
				item.sourceType = 5;
				uni.navigateTo({
					url:'/pagesMy/appraise/appraise?obj='+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		padding: 100rpx 0 1rpx;
		
		.orders{
			display: flex;
			flex-direction: column;
			align-items: center;
			&>view{
				width: calc(100% - 96rpx);
				margin-top: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				padding: 36rpx 24rpx 24rpx;
				.top{
					display: flex;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							width: 36rpx;
							height: 36rpx;
						}
						text{
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							line-height: 28rpx;
							margin-left: 20rpx;
						}
					}
					.right{
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 37rpx;
					}
				}
				.content{
					padding: 22rpx 0 24rpx 56rpx;
					border-bottom: 1rpx solid #EFEFEF;
					background: #fff;
					.title{
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;
					}
					.date{
						display: flex;
						align-items: center;
						margin-top: 22rpx;
						&>text{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;
							&:nth-child(2){
								margin: 0 10rpx;
							}
						}
					}
					.room_price{
						display: flex;
						justify-content: space-between;
						margin-top: 16rpx;
						.room{
							display: flex;
							align-items: center;
							&>text{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #AAAAAA;
								line-height: 24rpx;
								&:last-child{
									margin-left: 30rpx;
								}
							}
						}
						.price{
							text{}
						}
					}
				}
			
				.btns{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					&>view{
						margin: 24rpx 0 0 24rpx;
						width: 148rpx;
						height: 56rpx;
						border: 1rpx solid #EFEFEF;
						border-radius: 28rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
		
		.tip{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 33rpx;
			margin: 56rpx 0;
		}
		
		.qx{
			color: #AAAAAA !important;
		}
			
		.textQx{
			color: #AAAAAA;
		}
		.textDcx{
			color: #01B9F9;
		}
		.textDzf{
			color: #FF7D01;
		}
	}
</style>